{% extends "layout.html" %}
{% block content %}

<form class="layui-form layui-input-inline" lay-filter="form" style="margin-left: 10%;margin-top: 1%">
    <div class="layui-form-item" id="channel4Div">
        <label class="layui-form-label">选择通道:</label>
        <div class="layui-input-inline" style="width: 500px">
            <select name="channel4collect" id="channel4collect" lay-verify="required" lay-filter="channel4collect"
                    lay-search>
                <option value="">搜索或选择</option>
            </select>
        </div>
    </div>
</form>
<div class=" layui-anim layui-anim-up" >
    <h3 style="text-align: center;margin-top: 10%;color: red" id="title">需要配置采集通道并启用</h3>
    <table id="dataItemList" class="layui-table" lay-filter="dataItem" style="margin: auto">
    </table>
    <!--    <script type="text/html" id="dataItemBar">-->
    <!--        <div class="layui-btn-group">-->
    <!--            <button type="button" class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i></button>-->
    <!--            <button type="button" class="layui-btn layui-btn-sm"lay-event="del"><i class="layui-icon">&#xe640;</i></button>-->
    <!--        </div>-->
    <!--    </script>-->
</div>
<script type="text/javascript">
    $(function () {
        layui.use(['table', 'form', 'laydate', 'slider'], function () {
            var element = layui.element;
            var slider = layui.slider;
            var form = layui.form;
            var table = layui.table;
            $('#title').hide()
            //下拉框赋值开始
            $.ajax({
                url: '/channel4collect/channelList',
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    //使用循环遍历，给下拉列表赋值
                    let count = 0;
                    var channel4_date = data.data;
                    for (let i = 0; i < channel4_date.length; i++) {
                        if (channel4_date[i].enable === "1") {
                            count++;
                            if (count === 1) {
                                $('#channel4collect').append(new Option(channel4_date[i].name, channel4_date[i].channel_id, true, true));
                            } else {
                                $('#channel4collect').append(new Option(channel4_date[i].name, channel4_date[i].channel_id));
                            }
                        }
                    }
                    console.log($('#channel4collect').val())

                    form.render("select");//重新渲染 固定写法
                    if ($('#channel4collect').val() !== ''){
                        table.render({
                            elem: '#dataItemList'
                            , height: 'full-100'
                            , url: '/dataItem4collect/dataItemList'
                            , where: {channel_id: $('#channel4collect').val()}
                            , cols: [[
                                // {type:'checkbox', fixed: 'left'}
                                {title: 'ID', field: 'dataItem_id', align: 'center', sort: true, fixed: true}
                                , {title: '地址', field: 'address', align: 'center'}
                                , {title: '标签', field: 'label', align: 'center'}
                                , {title: '数据类型', field: 'data_type', align: 'center', sort: true}
                                , {title: '数值', field: 'value', align: 'center', sort: true}
                                , {title: '时间戳', field: 'timestamp', align: 'center', sort: true}
                                // ,{fixed: 'right', align:'center', toolbar: '#dataItemBar'}
                            ]]
                            , page: true
                            , loading: false,
                            done: function (res, curr, count) {// 表格渲染完成之后的回调
                                var that = this.elem.next();
                                res.data.forEach(function (item, index) {
                                    //console.log(item.empName);item表示每列显示的数据
                                    if (index % 2 == 0) {
                                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#fff");
                                    } else {
                                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#eeffee");
                                    }
                                });
                            }
                            // ,limit:100
                            // ,limits:[50,100,200,500]
                        });
                            var myInterval = setInterval(function () {
                                table.reload('dataItemList', {
                                    where: { // 传递数据异步请求时携带的字段
                                        channel_id: $('#channel4collect').val(),
                                    },
                                    // page: {
                                    //     curr: 1 // 你可以根据需要重置当前页码，但通常不推荐这样做，因为它会打断用户的浏览体验
                                    // },
                                    height: 1000 // 重设高度
                                });
                            }, 1000); // 每秒刷新一次

                        $(window).on('beforeunload', function() {
                            // 清除定时器
                            clearInterval(myInterval);
                        });
                    }else{
                        $('#title').show()
                    }
                }
            })
            form.on('select(channel4collect)',function(data){
                table.reload('dataItemList', {
                    where: {
                        channel_id: $('#channel4collect').val(),
                    },
                    height: 1000 // 重设高度
                });
            });

        })
    })
</script>

<style>
    /* 偶数行背景色 */
    .layui-table[lay-even] tr:nth-child(even) {
        /* background-color: #aaffaa; */
        background-color: #eeffee;
    }

    /* 鼠标指向表格时,奇数行背景颜色 */
    .layui-table tbody tr:hover,.layui-table-hover {
        background-color: #eeffee;
    }


    /* 表格头部背景色 */
    th {
        background-color: #359f6a; /* MediumSeaGreen */
        color: #fff;
        font-weight: bold
    }
</style>

{% endblock %}
{% block script %}
{% endblock %}